---
import { getCollection } from "astro:content";
import { SITE } from "@config";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import SearchBar from "@components/Search";
import getSortedPosts from "@utils/getSortedPosts";

// Retrieve all published articles
const posts = await getCollection("blog", ({ data }) => !data.draft);
const sortedPosts = getSortedPosts(posts);

// List of items to search in
const searchList = sortedPosts.map(({ data, slug }) => ({
  title: data.title,
  description: data.description,
  data,
  slug,
}));
---

<Layout title={`Search | ${SITE.title}`}>
  <Header activeNav="search" />
  <Main pageTitle="Search" pageDesc="Search any article ...">
    <SearchBar client:load searchList={searchList} />
  </Main>
  <Footer />
</Layout>
